Cheatsheet [Front-End]

3 · Controlled input — the two-way wiring

const [query, setQuery] = useState('');

<input
  value={query}                              // state → UI
  onChange={e => setQuery(e.target.value)}   // UI → state
  placeholder="Search"
/>

// Same idea for select
<select value={status} onChange={e => setStatus(e.target.value)}>
  <option value="all">All</option>
  <option value="stopped">Stopped</option>
</select>

// Form submit: preventDefault or the page reloads
<form onSubmit={e => { e.preventDefault(); addItem(query); }}>

4 · useCallback + React.memo — the pair

// Child: React.memo skips re-render if all props are === to last time
const Cell = React.memo(function Cell({ state, onClick }) {
  return <button onClick={onClick}>{state}</button>;
});

// Parent — WITHOUT useCallback: new function each render,
// so every Cell re-renders and React.memo does nothing:
const handleClick = (r, c) => { /* ... */ };   // ✗ new ref each render

// WITH useCallback: same reference until deps change
const handleClick = useCallback((r, c) => {
  setCells(prev => updateCell(prev, r, c));  // functional update ⇒
}, []);                                        // no deps needed at all

// Trap: inline arrow in JSX recreates the ref and defeats memo again.
<Cell onClick={() => handleClick(r, c)} />   // ✗ new ref per render
// Fix: pass r,c as props and let Cell call onClick(r, c) itself.

• Interview line: "I'd only add this after noting all 100 cells re-render per click — at this size it's optional, and I'd measure first."
• useMemo is the same idea for values; useCallback(fn, deps) ≡ useMemo(() => fn, deps).

6 · BFS / DFS in JavaScript

// BFS — level order on a tree (returns [[level0], [level1], ...])
function levelOrder(root) {
  if (!root) return [];
  const result = [], queue = [root];
  while (queue.length) {
    const size = queue.length;      // snapshot = this level
    const level = [];
    for (let i = 0; i < size; i++) {
      const node = queue.shift();
      level.push(node.val);
      if (node.left) queue.push(node.left);
      if (node.right) queue.push(node.right);
    }
    result.push(level);
  }
  return result;
}

// DFS — flood fill on a grid (recursion; mark visited by mutating)
const DIRS = [[0,1],[0,-1],[1,0],[-1,0]];
function flood(grid, r, c) {
  if (r < 0 || r >= grid.length ||
      c < 0 || c >= grid[0].length ||
      grid[r][c] !== '1') return;
  grid[r][c] = '0';                   // mark visited
  for (const [dr, dc] of DIRS) flood(grid, r + dr, c + dc);
}

• queue.shift() is O(n) — fine in interviews; mention "I'd use a head-index or deque for large n."
• Mutating the algorithm's own grid copy is fine — just never mutate React state this way.

7 · reduce — especially reduce-as-map

// Sum — the trivial case
const total = nums.reduce((acc, n) => acc + n, 0);

// Count by key → { stopped: 3, active: 2 }  ("reduce as map")
const counts = vehicles.reduce((acc, v) => {
  acc[v.status] = (acc[v.status] ?? 0) + 1;
  return acc;                       // ← forgetting this = classic bug
}, {});

// Group by key → { 'sf-1': [v1, v4], 'ph-1': [v3] }
const byZone = vehicles.reduce((acc, v) => {
  (acc[v.zoneId] ??= []).push(v);   // ??= creates the bucket once
  return acc;
}, {});

// Index by id → O(1) lookup table (Map keeps non-string keys)
const byId = new Map(vehicles.map(v => [v.id, v]));

• Rule of thumb to say aloud: array → array is map/filter; array → one thing (object, Map, number) is reduce.
• If the reduce body needs more than ~3 lines, a plain for...of loop is more readable — saying that is a point in your favor.